<template>
	<z-paging ref="paging" v-model="list" @query="getList">
		<template v-if="current === 0">
			<view class="d-p-l-30 d-p-r-30">
				<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top flex-column">
					<view class="d-font-34 d-white">
						{{cardarr.cardtype}}
					</view>
					<view class="d-flex d-m-t-10">
						<!-- <u-image :src="picture" width="148rpx" height="148rpx" shape="circle"></u-image> -->
						<view class="d-font-30 d-white ">
							晋爵
						</view>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-font-26 u-line-1 d-white">有效期至：{{cardarr.startdate}}-{{cardarr.enddate}}
							</view>
						</view>
					</view>
					<view class=" d-m-t-10 flex-space-between" style="width: 100%;">
						<view class="d-font-30 d-white ">
							{{cardarr.cardno}}
						</view>
						<view class="d-m-l-20 d-img" @click="qcodeclick">
							<image class="d-image" src="../../static/qita/icon10.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="d-du">
				<u-row :gutter="20">
					<u-col :span="6">
						<view class="box text-center">
							<view class="number">{{cardarr.left_quota}}</view>
							<view>剩余额度</view>
						</view>
					</u-col>
					<u-col :span="6">
						<view class="box text-center">
							<view class="number">{{cardarr.left_day}}</view>
							<view>剩余使用天数</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-cell-group>
				<u-cell v-for="(itm,idx) in consumeInfoarr.data" :key="idx">
					<view slot="title">
						<view class="date" v-if="itm.billtime != '' && itm.billtime != null">消费时间：{{itm.billtime}}
						</view>
						<view class="date" v-else>消费时间： --</view>
						<view class="date" v-if="itm.intime != '' && itm.intime != null">进场时间：{{itm.intime}}</view>
						<view class="date" v-else>进场时间： --</view>
						<view class="date" v-if="itm.outtime != '' && itm.outtime != null">出场时间：{{itm.outtime}}</view>
						<view class="date" v-else>出场时间： --</view>
						<!-- <view class="date">2023-10-20</view> -->
					</view>
					<!-- 计次卡 -->
					<view slot="value" class="text-right">
						<!-- <view class="number" style="color: #4f58ff"><text>+</text> 100<text
								v-if="item.gift_times != ''" style="color: #ff0000;">赠10</text></view> -->
						<!-- <view class="number" style="color: #ff0000">
							<text>-</text>{{parseFloat(item.gift_times) + parseFloat(item.times ) }}
						</view> -->
						<!-- <view class="number" v-if="item.op == 2" style="color: #ffaa00"><text>+</text> {{ item.times }}<text
								v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view> -->
						<view class="rest">消费模式：{{itm.modeltype}}</view>
					</view>
				</u-cell>
			</u-cell-group>
			<!-- 二维码弹窗 -->
			<view class="qcode_b" v-if="qcode_if" @click="qcodeguanbi"></view>
			<view class="qcode" v-if="qcode_if" @click="qcodeguanbi">
				<view class="qline">
					<view class="l1"></view>
					<view class="l1 l2"></view>
				</view>
				<view class="d-p-t-60">
					<view class="d-qrd">
						<view class="qcard">
							<view class="q1"></view>
							<view class="q1 q2"></view>
						</view>
						<view class="d-text-center d-p-t-60 d-main">使用时请出示此二维码</view>
						<view class="d-flex d-row-center d-m-t-15">
							<!-- <u-image :src="$demo" width="370rpx" height="370rpx"></u-image> -->
							<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="285"
								:value="concatenatedTimestamp" :options="{ margin: 10 }"></uqrcode>
						</view>
						<view class="d-main d-font-32 d-text-center d-m-t-30">{{ cardno }}</view>
						<view class="d-text-center d-99 d-font-22">为保障用户权益，二维码有效期为1分钟，请尽快展示核销</view>
					</view>
				</view>
			</view>
		</template>
		<customer-Kefu></customer-Kefu>
	</z-paging>
</template>

<script>
	import {
		usercardDetail,
		ticket
	} from '@/common/api';
	import customerKefu from '../../components/customerKefu/customerKefu.vue';
	export default {
		components: {
			customerKefu
		},
		data() {
			return {
				current: 0,
				list: [],
				picture: '../../static/qita/icon12.png',
				index: 0,
				qcode_if: false,
				cardType: '',
				cardno: '',
				cardarr: {},
				consumeInfoarr: {},
				concatenatedTimestamp: '',
				timer: null,
			};
		},
		onLoad(e) {
			console.log(e, '222')
			this.cardType = e.cardType,
				this.cardno = e.cardno
			let that = this;
			that.timer = null;
			// 当前时间的10位时间戳
			var currentTimestamp = Math.floor(new Date().getTime() / 1000);
			// 拼接时间戳
			var concatenatedTimestamp = this.cardno + '&' + currentTimestamp;
			this.concatenatedTimestamp = concatenatedTimestamp

			console.log(concatenatedTimestamp);

		},
		onShow() {
			let that = this;
			that.timer = null;
			clearInterval(that.timer);
			that.timer = setInterval(() => {
				// 当前时间的10位时间戳
				var currentTimestamp = Math.floor(new Date().getTime() / 1000);

				// 拼接时间戳
				var concatenatedTimestamp = this.cardno + '&' + currentTimestamp;
				this.concatenatedTimestamp = concatenatedTimestamp

				console.log(concatenatedTimestamp);
			}, 60000);
		},
		onUnload() {
			let that = this;
			clearInterval(that.timer);
			that.timer = null;
		},
		onHide() {
			let that = this;
			clearInterval(that.timer);
			that.timer = null;
		},
		methods: {
			concatelist() {
				let that = this;
				that.timer = null;
				clearInterval(that.timer);
				that.timer = setInterval(() => {
					// 当前时间的10位时间戳
					var currentTimestamp = Math.floor(new Date().getTime() / 1000);

					// 拼接时间戳
					var concatenatedTimestamp = this.cardno + '&' + currentTimestamp;
					this.concatenatedTimestamp = concatenatedTimestamp

					console.log(concatenatedTimestamp);
				}, 60000);
			},
			qcodeclick() {
				this.qcode_if = true
			},
			qcodeguanbi() {
				this.qcode_if = false
			},
			getList(page, limit) {
				usercardDetail({
						venue_id: uni.getStorageSync('venue_id'),
						cardType: this.cardType,
						cardNo: this.cardno,
					})
					.then(res => {
						console.log(res, '222')
						this.cardarr = res.card
						this.consumeInfoarr = res.consumeInfo
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.d-list-box {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: url('../../static/qita/nianka.png') no-repeat center;
		border-radius: 10rpx;
	}

	.d-list-box1 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(48, 182, 134);
		border-radius: 10rpx;
	}

	.d-list-box2 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(253, 168, 92);
		border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}

	.qline {
		position: relative;

		.l1 {
			width: 20rpx;
			height: 60rpx;
			background: #dce0fd;
			border-radius: 10rpx;
			position: absolute;
			left: 130rpx;
			bottom: -60rpx;
		}

		.l2 {
			left: auto;
			right: 130rpx;
		}
	}

	.d-qrd {
		width: 626rpx;
		min-height: 820rpx;
		background: #ffffff;
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		border-radius: 10rpx;
		margin: -22rpx auto 0;
	}

	.qcard {
		position: relative;

		.q1 {
			width: 22rpx;
			height: 22rpx;
			background: #ffffff;
			border: 4rpx solid #575c86;
			border-radius: 50%;
			box-sizing: border-box;
			position: absolute;
			left: 99rpx;
		}

		.q2 {
			left: auto;
			right: 99rpx;
		}
	}

	.d-main {
		color: #59a0ff;
	}

	.d-99 {
		color: #999;
	}

	.d-filter {
		filter: grayscale(100%);
	}

	.d-img {
		width: 8vw;
		height: 8vw;
		background-color: #ffffff;
		border-radius: 1vw;
	}

	.d-image {
		width: 7vw;
		height: 7vw;
		margin: 0.5vw 0 0 0.5vw;
	}

	.qcode {
		position: absolute;
		right: 9vw;
		top: 40vw;
		padding-top: 0.5vw;
		z-index: 999;
	}

	.qcode_b {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 998;
		background-color: #f3f3f3;
	}

	.d-du {
		padding: 0 4vw;

		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				padding: 40rpx 0;
				background-color: #ffffff;
				box-shadow: 0 0 3vw 0 rgba(0, 0, 0, 0.1);
				border-radius: 3vw;

				.number {
					color: #38bbff;
					margin-bottom: 40rpx;
					font-weight: bold;
					font-size: 5vw;
				}
			}
		}
	}

	/deep/.u-cell-group {
		margin-top: 30rpx;

		.name {
			color: #333;
			font-weight: bold;
		}

		.number {
			color: #ff4105;
		}

		.date {
			color: #ccc;
		}

		.rest {
			color: #9c9c9c;
		}

		.rest,
		.date {
			margin-top: 14rpx;
			font-size: 26rpx;
		}
	}
</style>